<template>
	<view>
		<view class="VideoGrid-box">
			<view class="VideoGrid">
				<view class="VideoGrid-item"
				v-for="(item,index) in videoGridlist"
				:key="index"
				:data-click="item.click"
				:data-index="index"
				@click="itemTap"
				>
					<view class="btn-Icons">
						<!-- #ifndef APP-NVUE -->
						<u-icon :name="item.MPIconsName" custom-prefix="custom-icon" :size="IconsFontSize" :color="IconColor[index].itemAppbtnIconsColor||MPIconsColor"></u-icon>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<!-- NVUE下不支持动态渲染字体图标，这里使用条件渲染 -->
						<view class="icons">
							<!-- 追剧[爱心] -->
							<text v-if="item.AppIconsName=='&#xe6a1;'"
							class="nvueiconfont"  :style="[{'color':IconColor[index].itemAppbtnIconsColor||AppIconsColor},{'font-size':IconsFontSize+'rpx'}]">&#xe6a1;</text>
							<!-- 收藏[五角星] -->
							<text v-if="item.AppIconsName=='&#xe617;'"
							class="nvueiconfont" :style="[{'color':IconColor[index].itemAppbtnIconsColor||AppIconsColor},{'font-size':IconsFontSize+'rpx'}]">&#xe617;</text>
							<!-- 分享 -->
							<text v-if="item.AppIconsName=='&#xe62f;'"
							class="nvueiconfont" :style="[{'color':IconColor[index].itemAppbtnIconsColor||AppIconsColor},{'font-size':IconsFontSize+'rpx'}]">&#xe62f;</text>
							<!-- 下载[暂不支持] -->
							<text v-if="item.AppIconsName=='&#xe67b;'"
							class="nvueiconfont" :style="[{'color':IconColor[index].itemAppbtnIconsColor||AppIconsColor},{'font-size':IconsFontSize+'rpx'}]">&#xe67b;</text>
						</view>
						<!-- #endif -->
					</view>
					<text class="Tit-text">{{item.title}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			//grid宫格数据列表
			videoGridlist:{
				type:Array,
				default:[]
			},
			//App端字体图标的颜色
			AppIconsColor:{
				type:String,
				default:'#bec5d3'//浅色(#bec5d3)||深色(#858d9c)
			},
			//非App端字体图标的颜色
			MPIconsColor:{
				type:String,
				default:'#bec5d3'//浅色(#bec5d3)||深色(#858d9c)
			},
			//字体图标的大小
			IconsFontSize:{
				type:Number,
				default:48
			}
		},
		name:"VideoGrid",
		data() {
			return {
				//IconsColor:'#bec5d3'
				//itemAppbtnIconsColor:'#858d9c',//点击了对应的的icon图标按钮，则改变颜色
				IconColor:[
					{
						itemAppbtnIconsColor:''
					},
					{
						itemAppbtnIconsColor:''
					},
					{
						itemAppbtnIconsColor:''
					}
				],
				itemAppbtnIconsColor:'',//先默认未空
			};
		},
		methods:{
			itemTap(e){
				console.log(e.currentTarget.dataset.click)
				console.log(e.currentTarget.dataset.index)
				let index = e.currentTarget.dataset.index
				let click = e.currentTarget.dataset.click
				//更改ICON图标按钮的颜色为深色
				this.IconColor[index].itemAppbtnIconsColor = '#858d9c'
				this.$emit('change',click)
				uni.showToast({
					title:'暂未开放',
					icon:'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './VideoGrid.scss';
</style>
